<template>
  <div v-for="item in scoreState.groupData">
    <div class="score-group-name">
      <el-icon><CaretRight /></el-icon>{{ item.groupName }}
    </div>
    <el-table :data="item.raceScoreboardInfoDtoList" border>
      <el-table-column prop="rank" label="排名" width="60" />
      <el-table-column prop="teamName" label="球队" />
      <el-table-column prop="matchCount" label="场次" />
      <el-table-column prop="winCount" label="胜" />
      <el-table-column prop="drawCount" label="平" />
      <el-table-column prop="loseCount" label="负" />
      <el-table-column prop="goalScored" label="进" />
      <el-table-column prop="goalConceded" label="失" />
      <el-table-column prop="goalDifference" label="净胜球" />
      <el-table-column prop="teamPoints" label="积分" />
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { getRaceScoreboard } from "@/api/match";
import { useRoute } from "vue-router";

const route = useRoute();
const raceId = ref(0); // 当前赛事的id
const scoreState = reactive({
  groupData: [
    {
      group: "A1",
      tableData: [
        {
          name: "江苏足协U14",
          icon: "https://lysy360-aliyun-oss-test.oss-cn-hangzhou.aliyuncs.com/attachments/other/2023/20230201/2023-02-01_08.48.21-3d4eea07d3467d0f70de072de1dcce6c.png?x-oss-process=style/w200png",
          no: 3,
          win: 3,
          flat: 3,
          lose: 3,
          lossGain: 3,
          GD: 27,
          add: null,
          integration: 9,
        },
        {
          name: "江苏足协U14",
          icon: "https://lysy360-aliyun-oss-test.oss-cn-hangzhou.aliyuncs.com/attachments/other/2023/20230201/2023-02-01_08.48.21-3d4eea07d3467d0f70de072de1dcce6c.png?x-oss-process=style/w200png",
          no: 3,
          win: 3,
          flat: 3,
          lose: 3,
          lossGain: 3,
          GD: 27,
          add: null,
          integration: 9,
        },
        {
          name: "江苏足协U14",
          icon: "https://lysy360-aliyun-oss-test.oss-cn-hangzhou.aliyuncs.com/attachments/other/2023/20230201/2023-02-01_08.48.21-3d4eea07d3467d0f70de072de1dcce6c.png?x-oss-process=style/w200png",
          no: 3,
          win: 3,
          flat: 3,
          lose: 3,
          lossGain: 3,
          GD: 27,
          add: null,
          integration: 9,
        },
        {
          name: "江苏足协U14",
          icon: "https://lysy360-aliyun-oss-test.oss-cn-hangzhou.aliyuncs.com/attachments/other/2023/20230201/2023-02-01_08.48.21-3d4eea07d3467d0f70de072de1dcce6c.png?x-oss-process=style/w200png",
          no: 3,
          win: 3,
          flat: 3,
          lose: 3,
          lossGain: 3,
          GD: 27,
          add: null,
          integration: 9,
        },
      ],
    },
    {
      group: "B1",
      tableData: [
        {
          name: "江苏足协U14",
          icon: "https://lysy360-aliyun-oss-test.oss-cn-hangzhou.aliyuncs.com/attachments/other/2023/20230201/2023-02-01_08.48.21-3d4eea07d3467d0f70de072de1dcce6c.png?x-oss-process=style/w200png",
          no: 3,
          win: 3,
          flat: 3,
          lose: 3,
          lossGain: 3,
          GD: 27,
          add: null,
          integration: 9,
        },
        {
          name: "江苏足协U14",
          icon: "https://lysy360-aliyun-oss-test.oss-cn-hangzhou.aliyuncs.com/attachments/other/2023/20230201/2023-02-01_08.48.21-3d4eea07d3467d0f70de072de1dcce6c.png?x-oss-process=style/w200png",
          no: 3,
          win: 3,
          flat: 3,
          lose: 3,
          lossGain: 3,
          GD: 27,
          add: null,
          integration: 9,
        },
        {
          name: "江苏足协U14",
          icon: "https://lysy360-aliyun-oss-test.oss-cn-hangzhou.aliyuncs.com/attachments/other/2023/20230201/2023-02-01_08.48.21-3d4eea07d3467d0f70de072de1dcce6c.png?x-oss-process=style/w200png",
          no: 3,
          win: 3,
          flat: 3,
          lose: 3,
          lossGain: 3,
          GD: 27,
          add: null,
          integration: 9,
        },
        {
          name: "江苏足协U14",
          icon: "https://lysy360-aliyun-oss-test.oss-cn-hangzhou.aliyuncs.com/attachments/other/2023/20230201/2023-02-01_08.48.21-3d4eea07d3467d0f70de072de1dcce6c.png?x-oss-process=style/w200png",
          no: 3,
          win: 3,
          flat: 3,
          lose: 3,
          lossGain: 3,
          GD: 27,
          add: null,
          integration: 9,
        },
      ],
    },
    {
      group: "C1",
      tableData: [
        {
          name: "江苏足协U14",
          icon: "https://lysy360-aliyun-oss-test.oss-cn-hangzhou.aliyuncs.com/attachments/other/2023/20230201/2023-02-01_08.48.21-3d4eea07d3467d0f70de072de1dcce6c.png?x-oss-process=style/w200png",
          no: 3,
          win: 3,
          flat: 3,
          lose: 3,
          lossGain: 3,
          GD: 27,
          add: null,
          integration: 9,
        },
        {
          name: "江苏足协U14",
          icon: "https://lysy360-aliyun-oss-test.oss-cn-hangzhou.aliyuncs.com/attachments/other/2023/20230201/2023-02-01_08.48.21-3d4eea07d3467d0f70de072de1dcce6c.png?x-oss-process=style/w200png",
          no: 3,
          win: 3,
          flat: 3,
          lose: 3,
          lossGain: 3,
          GD: 27,
          add: null,
          integration: 9,
        },
        {
          name: "江苏足协U14",
          icon: "https://lysy360-aliyun-oss-test.oss-cn-hangzhou.aliyuncs.com/attachments/other/2023/20230201/2023-02-01_08.48.21-3d4eea07d3467d0f70de072de1dcce6c.png?x-oss-process=style/w200png",
          no: 3,
          win: 3,
          flat: 3,
          lose: 3,
          lossGain: 3,
          GD: 27,
          add: null,
          integration: 9,
        },
        {
          name: "江苏足协U14",
          icon: "https://lysy360-aliyun-oss-test.oss-cn-hangzhou.aliyuncs.com/attachments/other/2023/20230201/2023-02-01_08.48.21-3d4eea07d3467d0f70de072de1dcce6c.png?x-oss-process=style/w200png",
          no: 3,
          win: 3,
          flat: 3,
          lose: 3,
          lossGain: 3,
          GD: 27,
          add: null,
          integration: 9,
        },
      ],
    },
    {
      group: "D1",
      tableData: [
        {
          name: "江苏足协U14",
          icon: "https://lysy360-aliyun-oss-test.oss-cn-hangzhou.aliyuncs.com/attachments/other/2023/20230201/2023-02-01_08.48.21-3d4eea07d3467d0f70de072de1dcce6c.png?x-oss-process=style/w200png",
          no: 3,
          win: 3,
          flat: 3,
          lose: 3,
          lossGain: 3,
          GD: 27,
          add: null,
          integration: 9,
        },
        {
          name: "江苏足协U14",
          icon: "https://lysy360-aliyun-oss-test.oss-cn-hangzhou.aliyuncs.com/attachments/other/2023/20230201/2023-02-01_08.48.21-3d4eea07d3467d0f70de072de1dcce6c.png?x-oss-process=style/w200png",
          no: 3,
          win: 3,
          flat: 3,
          lose: 3,
          lossGain: 3,
          GD: 27,
          add: null,
          integration: 9,
        },
        {
          name: "江苏足协U14",
          icon: "https://lysy360-aliyun-oss-test.oss-cn-hangzhou.aliyuncs.com/attachments/other/2023/20230201/2023-02-01_08.48.21-3d4eea07d3467d0f70de072de1dcce6c.png?x-oss-process=style/w200png",
          no: 3,
          win: 3,
          flat: 3,
          lose: 3,
          lossGain: 3,
          GD: 27,
          add: null,
          integration: 9,
        },
        {
          name: "江苏足协U14",
          icon: "https://lysy360-aliyun-oss-test.oss-cn-hangzhou.aliyuncs.com/attachments/other/2023/20230201/2023-02-01_08.48.21-3d4eea07d3467d0f70de072de1dcce6c.png?x-oss-process=style/w200png",
          no: 3,
          win: 3,
          flat: 3,
          lose: 3,
          lossGain: 3,
          GD: 27,
          add: null,
          integration: 9,
        },
      ],
    },
  ],
});

const handleGet = async () => {
  const res = await getRaceScoreboard({ raceId: raceId.value });
  scoreState.groupData = res.data;
};

onMounted(() => {
  let { id } = route.query;
  raceId.value = Number(id);
  handleGet();
});
</script>

<style lang="scss" scoped>
.score-group-name {
  display: flex;
  align-items: center;
  margin: 8px 0;
  :deep(.el-icon) {
    color: #53a8ff;
    font-size: 28px;
    margin-left: -10px;
  }
}
.team-name {
  display: flex;
  align-items: center;
  img {
    width: 20px;
    margin-right: 5px;
  }
}
</style>